<div>
  <div id="divmain">
    <!-- 表格区 -->
    <div class="col-sm-12" style="margin-left: 0px;padding-left: 0px;">
      <data-table (changepage)="changepage($event,modal)" [isCheckBox]="isCheck" [title]="title" [arr]="arrbutes" [addButton]="btnAdd"
        (addOpen)="addOpen($event,addModal)" [editButton]="btnEdit" [deleteButton]="btnDelete" (deletesEmit)="deleteDatas($event)"
        [importButton]="btnImport" (importEmit)="import($event)" [exportButton]="btnExport" (exportEmit)="export($event)" [buttonList]="btnList"
        (operat)="operatData($event,editModal)" [total]="total" [data]="data" [page]="page" [sizeList]="sizeList" [paging]="paging"
        [pageSize]="pageSize" [buttonstyle]="btnstyle">
      </data-table>
    </div>
  </div>

  <!-- 提示框，隐藏IP地址 -->
  <p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true">
    <p style="text-align:center">
      {{messages}}
    </p>

    <p-footer>
      <button type="button" pButton icon="fa-check" (click)="display=false" label="确定"></button>
    </p-footer>
  </p-dialog>

  <!--删除提示框-->
  <p-confirmDialog header="提示" icon="fa fa-question-circle" width="425"></p-confirmDialog>

  <!-- 添加家庭成员 style="visibility:hidden" visible-->
  <div #addModal class="modal-dialog" (click)="draggable()" style="width:700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close(addModal)">×
        </button>
        <h4 class="modal-title">
          添加家庭成员
        </h4>
      </div>
      <div class="modal-body">
        <!--<form role="form" class="form-horizontal" #addform="ngForm">-->
           <form role="form" class="form-horizontal" #validationForm1="ngForm">
          <div class="form-group">
            <div class="col-sm-6 form-inline">
                <label class="control-label">姓名：</label>
                <label>
                  <input type="text" id="familyMemName" class="form-control" [(ngModel)]="homeInfo.familyMemName" name="familyMemName" ngModel
                    #familyMemName="ngModel" required>
                 </label>
                  <!--<p class="sign" [hidden]="familyMemName.valid">必填项</p>-->
              </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">关系：</label>
              <label>
                <!-- <input type="text" class="form-control" [(ngModel)]="homeInfo.relationshipId" name="relationshipId"> -->
                <select class="form-control sel-width" [(ngModel)]="homeInfo.relationshipId" name="relationshipId" required>
                  <option *ngFor="let option of relationOptions" [value]="option.id">{{option.dictName}}</option>
                </select>
              </label>          
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">工作：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="homeInfo.work" name="work" >
              </label>
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">电话：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="homeInfo.phone" 
                name="phone" #appPhone="ngModel" phone="CN" minlength="11" maxlength="11" required/>
              </label>      
               <p class="sign" [hidden]="appPhone.valid||appPhone.pristine">不是合法的电话号码</p>
               <!--<p class="sign" [hidden]="appPhone.valid">不是合法的电话号码</p>   -->
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">微信：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="homeInfo.wechat" name="wechat" >
              </label>
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">&nbsp;&nbsp;QQ：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="homeInfo.qq" name="qq" >
              </label>
            </div>
          </div>
          <!-- <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">邮箱：</label>
              <label>
                <input type="email" class="form-control" [(ngModel)]="homeInfo.email" name="email" #appEmail="ngModel" email required>                        
                <p [hidden]="appEmail.valid||appEmail.pristine">不是合法的邮箱地址</p>
              </label>
                <p [hidden]="appEmail.valid||appEmail.pristine">不是合法的邮箱</p>               
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">备注：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="homeInfo.remark" name="remark" >
              </label>
            </div>
          </div> -->
        </form>
      </div>
      <div class="modal-footer">
        <!-- [disabled]="!addform.form.valid" -->
        <button type="button" class="btn btn-primary" [disabled]="!validationForm1.form.valid" (click)="add(addModal)">
          添加
        </button>
        <button type="button" class="btn btn-default" (click)="close(addModal)">
          取消
        </button>
      </div>
    </div>
  </div>

  <!-- 修改家庭成员 style="visibility:hidden" visible  modal-dialog-->
  <div #editModal class="modal-dialog" (click)="draggable()" style="width:700px">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" (click)="close(editModal)">×
          </button>
          <h4 class="modal-title">
            修改家庭成员
          </h4>
        </div>
        <div class="modal-body">
          <!--<form role="form" class="form-horizontal" #editform="ngForm">-->
            <form role="form" class="form-horizontal" #validationForm2="ngForm">
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">姓名：</label>
                <label>
                  <input type="text" id="familyMemName" class="form-control" [(ngModel)]="homeInfo.familyMemName" name="familyMemName" ngModel
                    #familyMemName="ngModel" required>
                 </label>
                  <!--<p class="sign" [hidden]="familyMemName.valid||familyMemName.pristine">必填项</p>              -->
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">关系：</label>
                <label>
                  <select class="form-control sel-width" [(ngModel)]="homeInfo.relationshipId" name="relationshipId" ngModel #relationshipId="ngModel"
                    required>
                    <option *ngFor="let option of relationOptions" [value]="option.id">{{option.dictName}}</option>
                  </select>
                  <!-- <p [hidden]="relationshipName.valid||relationshipName.pristine">必填项</p> -->
                  <!-- <input type="text" class="form-control" [(ngModel)]="homeInfo.relationshipId" name="relationshipId"> -->
                </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">工作：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="homeInfo.work" name="work" >
                </label>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">电话：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="homeInfo.phone" name="phone" ngModel #editappPhone="ngModel" phone="CN"
                  minlength="11" maxlength="11" required>
                </label>
                  <p class="sign"  [hidden]="editappPhone.valid||editappPhone.pristine">不是合法的电话号码</p>              
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">微信：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="homeInfo.wechat" name="wechat" >
                </label>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">&nbsp;&nbsp;QQ：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="homeInfo.qq" name="qq" >
                </label>
              </div>
            </div>
            <!-- <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">邮箱：</label>
                <label>
                  <input type="email" class="form-control" [(ngModel)]="homeInfo.email" name="email" #appEmail="ngModel" email required >
                </label>
                  <p class="sign" [hidden]="appEmail.valid||appEmail.pristine">不是合法的邮箱地址</p>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">备注：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="homeInfo.remark" name="remark" >
                </label>
              </div>
            </div> -->
          </form>
        </div>
        <div class="modal-footer">
          <!-- [disabled]="!addform.form.valid" -->
          <button type="button" class="btn btn-primary"  [disabled]="!validationForm2.form.valid"(click)="update(editModal)">
            修改
          </button>
          <button type="button" class="btn btn-default" (click)="close(editModal)">
            取消
          </button>
        </div>
      </form>
    </div>
  </div>
</div>